<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>vue测试</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: rebeccapurple;
    }

    .inner {
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
  </style>
  <script>
    function myFunction() {
      console.log(1);
    }
    function clickIner() {
      console.log(0);

    }
  </script>
</head>

<body>
  <div class="container" onclick="myFunction()" onmouseenter="myFunction()">
    <div class="inner" onclick="clickIner()">
      点击
    </div>
  </div>
  <script>
    //定义一个动物类
    function Animal(name) {
      //属性
      this.name = name || 'Animal';//实例方法
      this.sleep = function () {
        console.log(this.name + '正在睡觉！');
      }
    }
    // Animal.prototype.eat = function (food) { console.log(this.name + '正在吃：' + food); };
    // function Cat() { }
    // Cat.prototype = new Animal();
    // Cat.prototype.name = 'cat';
    // var cat = new Cat();
    // console.log(cat.name);
    // console.log(cat.eat('fish'));
    // console.log(cat.sleep());
    // console.log(cat instanceof Animal);//true
    // console.log(cat instanceof Cat);//true

    // 构造继承
    // 缺点：只能继承父类实例的属性和方法，不能继承原型上的属性和方法。
    // function Cat(name) {
    //   Animal.call(this);
    //   this.name = name || 'Tom';
    // }//TestCode
    // var cat = new Cat();
    // console.log(cat.name);
    // console.log(cat.sleep());
    // console.log(cat instanceof Animal);//false
    // console.log(cat instanceof Cat);//true

    // 组合继承
    // 特点：可以继承实例属性/方法，也可以继承原型属性/方法
    // 缺点：调用了两次父类构造函数，生成了两份实例
    // function Cat(name) {
    //   Animal.call(this);
    //   this.name = name || 'Tom';
    // }
    // Cat.prototype = new Animal();
    // Cat.prototype.constructor = Cat;
    // var cat = new Cat();
    // console.log(cat.name);
    // console.log(cat.sleep());
    // console.log(cat instanceof Animal);//true
    // console.log(cat instanceof Cat);//true

    // 寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性
    function Cat(name) {
      Animal.call(this);
      this.name = name || 'Tom';
    }
    var Super = function () { };
    Super.prototype = Animal.prototype;//将实例作为子类的原型
    Cat.prototype = new Super();
    var cat = new Cat(); console.log(cat.name); console.log(cat.sleep());
    console.log(cat instanceof Animal);//true
    console.log(cat instanceof Cat);//true
  </script>

</body>

</html>